<!--location.html
        提供用户应用中的html，利用JavaScript，实现与高德地图的开放API对接
        能让这个静态页面中 加载高德地图

        为了统一管理混合开发，包括：权限 能力集 都单独定义到外部实现
        方式：util

        至于高德地图的能力 需要再高德地图官网 开通账号 设置配置等处理所有使用的能力
        参考高德地图开发手册
        -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>地图导航定位</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style rel="stylesheet" type="text/css">
        /*去除正文区域内外的间距：全屏*/
        body{margin:0; padding:0}
        /*地图加载容器的大小*/
        #container{
            width:100%;
            height:100vh;
        }
    </style>
</head>
<body>
<!--这里是前端HTMl的开发 -->
<!--利用js脚本 实现 与 高德地图开发接口的对接 -->
<!--实现页面中 加载高德地图.-->
<!--注册高德平台账号：https://lbs.amap.com/-->
<!--开发手册：https://lbs.amap.com/api/javascript-api-v2/summary-->

<!--地图呈现容器-->
<div id="container"></div>

<!--设置全局变量-->
<script type="text/javascript">
    //将密钥设置到全局 后面很多代码都需要使用
    //在当前window对象中 挂载_AMSecurityConfig
    window._AMapSecurityConfig = {
    securityJsCode: "a5f181bef634ac7057618a14b1270de5",
  };
</script>

<!--加载官方地图脚本，请附加申请的key-->
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=b1a80016f40b27889a71717fd33439f5"
></script>

<!--自定义脚本开发-->
<script type="text/javascript">
    //这里的代码 默认执行
    //创建地图对象 进行初始化('绑定的容器',{配置})
    var map=new AMap.Map(
        'container',    //加载地图的容器id
       {
            zoom:18,                        //初始地图缩放比例
            center:[114.268327,22.722386]   //初始中心点的[经度，纬度]
       }
    )

      //当页面正式加载完毕后
            window.onload = function(){
                //调用鸿蒙端，代理注册过来的函数，设置定位点
                window.swift.setCurrentLocation()
            };

            //方法：定位设置
            function setLocation(lon, lat){
                //重新设置地图的中心点
                map.setZoomAndCenter(25, [lon,lat]);

                //设置当前中心点的标记
                var marker = new AMap.Marker({
                    map,
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    position: [lon,lat]
                });

                //加入到地图中
                map.add(marker);

                //为地图新增插件能力：搜索
                map.plugin(['AMap.PlaceSearch'], function(){

                    //创建搜索功能对象，提供搜索设置
                    var MSearch = new AMap.PlaceSearch({
                        map,                //绑定的地图组件
                        pageSize: 4,        //每页多少条
                        pageIndex: 1,       //第几页
                        extensions: 'base'  //扩展：基本信息
                    });

                    //为地图设置监听：当搜索结果完成时
                    AMap.Event.addListener(MSearch, 'complete', (res)=>{
                        //调用鸿蒙方法，传回搜索结果
                        //通讯传递，只能是字符串string
                        window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    });

                    //执行搜索：自动标记
                    MSearch.searchNearBy('停车场', [lon,lat]);
                });
            }
</script>
</body>
</html>